<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3-5-2-进度条</title>
<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">

</style>
</head>
<body>

	<div class="container">

<h1>基础进度条</h1>
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuenow="80"
			aria-valuemin="0" aria-valuemax="100" style="width: 30%">

			</div>
		</div>

<br>
<h1>基础进度条，进度条加标签即可显示百分比</h1>
		<div class="progress">
			<div class="progress-bar" role="progress-bar" aria-valuemin="0" aria-valuemax="100" style="width:5%">
				2%
			</div>
		</div>

<br>
<h1>基础进度条，可以 progress-bar-XXX  加success或者其它效果</h1>
		<div class="progress">
			<div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%">
				30%
			</div>
		</div>

<br>
<h1>条纹进度条，active为动画效果</h1>
		<div class="progress">
			<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%">
				40%
			</div>
		</div>

<br>
<h1>基础+条纹进度条，堆叠效果</h1>
		<div class="progress">
			<div class="progress-bar" style="width: 30%">基础进度条</div>

			<div class="progress-bar progress-bar-success progress-bar-striped " style="width: 25%">条纹success进度条</div>

		</div>

	</div>






<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">
	
// $("#ul-badge").click(function(e){
// 	e.preventDefault()
// 	$(this).tab("show")
// })





</script>

</body>
</html>